<template>
    <view class="context">
		<view class="statuts-bar-box"  @click="editAction('')">
			<view class="s-b-b">
				<view class="time-txt">{{barTimeTxt}}</view>
				<view class="pw-per-box">
					<view>100%</view>
					<image src="../../../static/images/power-icon.png"></image>
				</view>
			</view>
			<view class="tit-txt"id="titleTxt">{{titleTxt}}</view>
		</view>
		
		<view class="main-box" :class="{'cursor-pointer' : isEdit == 0}">
			<view class="shop-box">
				<view class="logo-title-box">
					<view class="img-logo" @click="editAction(action.logo)">
						<image :src="logo" mode="aspectFill">
					</view>
					<view class="name">
						<view class="title-txt" @click="editAction(action.shopName)">{{shopName}}</view>
						<view class="notice-txt" @click="editAction(action.shopNotice)">公告 | {{noticeTxt? noticeTxt : '暂无公告'}}</view>
					</view>
				</view>
				<view class="addr-p-c">
					<text class="icon-font local-pos" @click="editAction(action.adress1)">&#xe60d;</text>
					<text class="address" @click="editAction(action.adress2)">{{district}}</text>
					<text class="icon-font phone" @click="editAction(action.phone)">&#xe60a;</text>
				</view>
			</view>
			
			<view class="desc-more" v-if="descMore && descMore.length > 0">
				<view class="group-box" v-for="(item,index) in descMore" :key="index">
					<text class="group-title" v-if="item && item.title">{{item.title}}</text>
					<!-- item.type == '1' 只有图片带有名称 -->
					<view class="group-context" v-if="item && item.type == 1" @click="editAction(action.team,index)">
						<view class="group-img-box-w1 group-img-box " 
							v-for="(imgTit, idx) in item.info" :key="idx" >
							<image :src="imgTit.imgs? imgTit.imgs : defaultImg" mode="aspectFill"></image>
							<view class="team-name">{{imgTit.title}}</view>
						</view>
						<view class="move-act-box" v-if="curAct == index">
							<view class="move-btn" id="move_up" v-if="index > 0" @click.stop="onMoveUp(index)">上移</view>
							<view v-if="index > 0 && index < descMore.length - 1" >|</view>
							<view class="move-btn" id="move_down" v-if="index < descMore.length - 1" @click.stop="onMoveDown(index)">下移</view>
						</view>
					</view>
					<!-- item.type == '2' 只有图片 -->
					<view class="group-context" v-else-if="item && item.type == 2" @click="editAction(action.images,index)">
						<view class="group-img-box-w2 group-img-box g-i-b-p-b" 
						v-for="(imgTxt, idx) in item.info" :key="idx" >
							<image :src="imgTxt.imgs? imgTxt.imgs : defaultImg" mode="aspectFill"></image>
						</view>
						<view class="move-act-box" v-if="curAct == index">
							<view class="move-btn" id="move_up" v-if="index > 0" @click.stop="onMoveUp(index)">上移</view>
							<view v-if="index > 0 && index < descMore.length - 1">|</view>
							<view class="move-btn" id="move_down" v-if="index < descMore.length - 1" @click.stop="onMoveDown(index)">下移</view>
						</view>
					</view>
					<!-- item.type == '3' 有文本带图片 -->
					<view class="group-context" v-else-if="item && item.type == 3" @click="editAction(action.imageTxt,index)">
						<view v-for="(imgTxt, idx) in item.info" :key="idx"  class="img-w">
							<view class="editor-context" :class="{'editor-context-p':!imgTxt.imgs}" v-if="imgTxt.text" >{{imgTxt.text}}</view>
							<view class="group-img-box-w3 group-img-box g-i-b-p-b" v-if="imgTxt.imgs">
								<image :src="imgTxt.imgs" mode="aspectFill"></image>
							</view>
						</view>
						<view class="move-act-box" v-if="curAct == index">
							<view class="move-btn" id="move_up" v-if="index > 0" @click.stop="onMoveUp(index)">上移</view>
							<view v-if="index > 0 && index < descMore.length - 1">|</view>
							<view class="move-btn" id="move_down" v-if="index < descMore.length - 1" @click.stop="onMoveDown(index)">下移</view>
						</view>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
import editCloudShop from "@/js/cloudShop/EditCloudShop.js";
import staticConst from "@/js/const/StaticConst.js";
export default {
    props: [],
    components: {},
    computed: {},
    data() {
        return {
            action: editCloudShop.action,
            barTimeTxt: "",
            titleTxt: "店铺详情",

            isEdit: 0, //0:编辑,1:预览

            logo: "",
            shopName: "",
            shopId: "",
            cellphone: "",
            district: "",

            descMore: [], //

            curAct: "",

            defaultImg: staticConst.GOOD_IMG,
            noticeTxt: "", //公告
        };
    },
    created() {},
    mounted() {
        let now = new Date();
        this.barTimeTxt =
            String(now.getHours()) + ":" + String(now.getMinutes());
        uni.$on("cloud_shop_edit_action", (data) => {
            this.updateAction(data);
        });
    },
    methods: {
        updateAction(data) {
            if (data.act == this.action.logo) {
                //logo
                this.logo = data.data.url;
            } else if (data.act == this.action.shopName) {
                //店铺名称
                this.shopName = data.data.name;
            } else if (data.act == this.action.adress2) {
                this.district = data.data;
            } else if (
                data.act == this.action.team ||
                data.act == this.action.images ||
                data.act == this.action.imageTxt
            ) {
                //图文信息
                this.descMore[data.data.index] = data.data;
            } else if (data.act == this.action.delTeamImgTxt) {
                //删除图文信息
                this.descMore.splice(data.data.index, 1);
            } else if (data.act == this.action.shopNotice) {
                this.noticeTxt = data.data;
            }
            this.$forceUpdate();
        },

        editAction(act, data = null) {
            if (this.isEdit == 1) return;
            if (act == this.action.adress1) return; //暂时取消
            this.curAct = act;
            if (
                act == this.action.team ||
                act == this.action.images ||
                act == this.action.imageTxt
            )
                //图文信息
                this.curAct = data;
            let obj = {};
            obj.act = act;
            obj.data = data;
            editCloudShop.eidt(obj);
        },

        onMoveUp(index) {
            this.moveHandler(index, "up");
        },

        onMoveDown(index) {
            this.moveHandler(index, "down");
        },

        moveHandler(index, dire) {
            let temp = this.descMore[index];
            let act = this.action.moveTeamImgTxt;
            let idx = dire == "up" ? index - 1 : index + 1;
            this.descMore[index] = this.descMore[idx];
            this.descMore[idx] = temp;
            this.curAct = idx;
            this.$forceUpdate();
            let data = {};
            data.dire = dire; //方向
            data.index = index;
            this.editAction(act, data);
        },
    },
};
</script>

<style lang="scss" scoped >
.context {
    width: 100%;
    height: 100%;
    padding-bottom: 120upx;

    .cursor-pointer {
        cursor: pointer;
    }
    .main-box {
        height: calc(100% - 176upx);
        overflow-y: auto;
        padding-bottom: 20upx;
        // overflow: hidden;
    }
    .main-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }
    .main-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 0px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .main-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }

    .statuts-bar-box {
        height: 176upx;
        width: 100%;
        background-color: #fff;
        position: relative;
        // .feet-box{
        // 	position: absolute;
        // 	width: 420upx;
        // 	height: 64upx;
        // 	left: 0;
        // 	top: 0;
        // 	right: 0;
        // 	bottom: 0;
        // 	margin: 0 auto;
        // 	border-bottom-left-radius: 30upx;
        // 	border-bottom-right-radius: 30upx;
        // 	background-color: #000;
        // }
        cursor: pointer;
        .s-b-b {
            display: flex;
            justify-content: space-between;
            padding: 38upx 20upx;
            .time-txt {
            }
            .pw-per-box {
                color: #aaa;
                display: flex;
                align-items: center;
                view {
                    padding-right: 10upx;
                }
                image {
                    width: 52upx;
                    height: 20upx;
                }
            }
        }
        .tit-txt {
            text-align: center;
            cursor: pointer;
            font-size: 28upx;
        }
    }

    .shop-box {
        width: calc(100% - 40upx);
        background-color: #fff;
        border-radius: 8upx;
        margin: 20upx;
        .logo-title-box {
            margin-left: 30upx;
            margin-right: 30upx;
            display: flex;
            align-items: center;
            border-bottom: 1upx #eee solid;
            .img-logo {
                padding-top: 30upx;
                padding-bottom: 30upx;
                image {
                    width: 120upx;
                    height: 120upx;
                    border-radius: 50%;
                }
            }
            .title-txt {
                font-size: 40upx;
                padding-left: 20upx;
                font-weight: bold;
            }
        }
        .addr-p-c {
            padding: 30upx;
            position: relative;
            display: flex;
            .local-pos {
                color: #3388ff;
                font-size: 28upx;
            }
            .address {
                display: block;
                max-width: 550upx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 10upx;
            }
            .phone {
                color: #1cb436;
                position: absolute;
                font-size: 28upx;
                right: 30upx;
            }
        }
    }

    .group-box {
        padding-left: 20upx;
        // padding-right: 20upx;
        padding-top: 20upx;
        background-color: #fff;
        // padding-bottom: 300;
        margin-bottom: 20upx;
        // .group-title
        // {
        // 	padding-bottom: 20upx;
        // }
        .group-context {
            .img-w {
                width: 100%;
            }
            padding-top: 20upx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            position: relative;
            .group-img-box-w1 {
                width: 22.2%;
                height: 160upx;
                margin-bottom: 60upx;
            }
            .group-img-box-w2 {
                width: 30.5%;
                height: 160upx;
            }
            .group-img-box-w3 {
                width: calc(100% - 20upx);
                height: 300upx;
            }
            .g-i-b-p-b {
                margin-bottom: 20upx;
            }
            .group-img-box {
                // margin-bottom: 60upx;
                // height: 160upx;
                // width: 22.1%;
                // border: 1upx #eee solid;
                // border-radius: 8upx;
                color: #999;
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                position: relative;
                margin-right: 20upx;

                image {
                    height: 100%; //160upx;
                    width: 100%;
                    position: absolute;
                    left: 0;
                }

                .team-name {
                    width: 100%;
                    height: 40upx;
                    text-align: center;
                    position: absolute;
                    bottom: -50upx;
                }
            }

            .move-act-box {
                background-color: #000;
                border-radius: 8upx;
                color: #fff;
                position: absolute;
                right: 10upx;
                top: -60upx;
                display: flex;
                .move-btn {
                    padding: 4upx 20upx;
                }
            }
        }
    }

    .group-box-b {
        padding-bottom: 20upx;
    }
}
.editor-context {
    padding-top: 10upx;
    width: calc(100% - 20upx);
    padding-right: 20upx;
    color: #666;
    padding-bottom: 10upx;
}
.editor-context-p {
    padding-bottom: 20upx;
}
.name {
    margin-top: 20upx;
    margin-bottom: 20upx;
    .notice-txt {
        margin-left: 10px;
    }
    view:first-child {
        font-size: 30upx;
    }
    view:last-child {
        font-size: 20upx;
        color: #a8a8a8;
    }
}
</style>
